上篇博客提到将项目放到tomcat下，用于储存静态资源。计划赶不上变化，由于项目的需要，不适用tomcat，使用nginx，于是需要将react项目打包放到nginx下或者放到单独的文件中，通过nginx来做代理访问我们的项目。

于是在本地测试环境中装了一个nginx，安装很简单可以到官网下载：http://nginx.org/en/download.html

我用的是最新的nginx

安装之后，文件目录如下：

然后开始使用webpack打包我们的项目，执行

build的配置在上篇文章中说道了，在package.json中的配置

build之后会在build目录下生成一些文件

这是一个完整的build目录(当然这个build目录可以调整，修改path的文件就行，具体的可以参考：https://www.jb51.net/article/158194.htm)，如果nginx下进行操作，那么我们就不需要为它单独起服务，我是编译后自动放到项目路径下的，可以在nginx中进行路径的配置，我们找到nginx.conf文件添加我们的项目文件路径配置

config文件中的server下增加

主要配置root和index。root是指向你文件的路径，index指向你的index页面。

第一个location 是在我们前端使用路由的时候，如果用到broswerHistory时，需要增加的配置。

我们知道，在使用hashHistory的时候是不需要后台服务进行参与的，也就不需要后台进行配置。而当我们使用broswerHistory的时候，我们在浏览器中的每一条url都希望有一个对后台服务的请求，那么他就会向后台去请求资源，当然压缩后的文件在资源请求时是肯定不存在的，所以我们需要通过nginx的配置来将我们的指向到index.html下，所以需要配置一下。详情可以参考：http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

第二、第三个location表示指向我的js和css所在的文件目录，在这里需要注意的是，我的css和js文件实际是在build/static/js以及css文件夹下，

而它的配置路径却只配置到static下，是因为在使用nginx的时候，访问这个js文件会自己加上js和css对应的文件目录。

我们来测试一下，修改到js和css路径，这样看起来跟实际的目录是一样的。

但是，当我们访问项目时，在进行路径跳转和刷新的时候，却会报错要么是404，要么是这个熟悉的语法错误。

首先，我的代码在本地编译之前测试是没问题的，而编译的过程中也没有报错，既然这样那一般就是路径出现了问题，从这里其实看不到什么问题的。那怎么定位问题呢？

我们可以找到nginx的日志文件

其实我们只要看error.log就可以发现路径出现了问题：

从上面就可以看出，其实他是多了一个css和js目录的，只要在配置中去掉js/css这一层级就行了。

第四和第五个则是对于css和js访问时的重定向。就是访问文件目录时，会重定向编译后的文件目录

在这还有个问题，如果你放到真实的nginx环境中而不是window环境下，就会发现项目是访问不了的，在这里需要注意的时，要将重定向的文件目录符改一下，因为linux下目录符是这样的"/"而不是"\"的。

至此，一个react项目冲编译到发布就算是摸索着过来了，中间碰到很多坑，不过好在都一个个的解决了。

关于nginx的配置文件修改。每次修改都需要重新启动一下nginx，具体执行命令

如果在window下可以直接在cmd命令切换到nginx目录执行对应的命令即可。